<template>
  <div class="shoppingcar-box">
    <!-- 头部 -->
    <van-nav-bar title="商品分类" left-arrow @click-left="onClickLeft" />
    <!-- 购物车内容 -->
    <main>
      <div class="empty_" v-if="isShow">
        <van-empty description="购物车空空如也">
          <van-button round type="danger" class="bottom-button" @click="$router.push('/shop')">立即购物</van-button>
        </van-empty>
      </div>
      <div class="goods">
        <van-swipe-cell v-for="gooditem in goods" :key="gooditem.cartid">
          <template #default>
            <van-checkbox v-model="gooditem.flag" @click="Option()"></van-checkbox>
            <van-card :price="gooditem.originprice" :desc="gooditem.proname" :thumb="gooditem.img1">
              <template #footer>
                <van-button
                  size="mini"
                  class="sub_"
                  @click="addgood1(gooditem.cartid,gooditem.num)"
                >-</van-button>
                <input type="text" :value="gooditem.num" class="num_" />
                <van-button size="mini" class="add_" @click="addgood2(gooditem.cartid,gooditem.num)">+</van-button>
              </template>
            </van-card>
          </template>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="deleteone(gooditem.cartid)"
            />
          </template>
        </van-swipe-cell>
      </div>
      <!-- 底部 -->
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">快点来看看</van-divider>
    </main>

    <div class="like__">
      <ul>
        <li v-for="obj in like" :key="obj.proid" @click="goDetail(obj.proid)">
          <img :src="obj.img1" alt />
          <p class="like-name">{{ obj.proname }}</p>
          <p class="like-price">￥{{ obj.originprice }}</p>
        </li>
      </ul>
    </div>
    <div class="foot_">
      <van-submit-bar :price="price1" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked">全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送,
          <span @click="onClickEditAddress">修改地址</span>
        </template>
      </van-submit-bar>
    </div>
    <FooterBarVue></FooterBarVue>
  </div>
</template>

<script>
import axios from "axios";
import FooterBarVue from "@/components/footerVue.vue";
export default {
  name: "shopCar",
  components: {
    FooterBarVue
  },
  data() {
    return {
      like: [],
      goods: [],
      isShow: true,
      checked: false,
      price1: 200,
      value: 2,
    };
  },
  created() {
    axios({
      url: "http://121.89.205.189:3001/api/pro/recommendlist"
    }).then(res => {
      if (res.data.code == 200) {
        this.like = res.data.data;
      }
    });
    let token = localStorage.getItem("token");
    let userid = localStorage.getItem("userid");

    axios({
      method: "post",
      token: token,
      url: "http://121.89.205.189:3001/api/cart/list",
      data: `userid=${userid}`
    }).then(res => {
      if (res.data.code == 200) {
        this.isShow = false;
        this.goods = res.data.data;
        console.log(this.goods);
        let goods1 = this.goods;
        let sum = 0;
        goods1.forEach(item => {
          sum += Number(item.originprice) * Number(item.num) * 100;
        });
        this.price1 = sum;
      }
    });
  },

  methods: {
    goDetail(goodsid) {
      this.$router.push("/goodsdetail/" + goodsid);
      window.location.reload();
    },
    onClickLeft() {},
    onSubmit() {},
    onClickEditAddress() {},
    deleteone(cartid) {
      
      axios({
        method: "post",
        token: "token",
        url: "http://121.89.205.189:3001/api/cart/remove",
        data: `cartid=${cartid}`
      }).then(res => {
        if (res.data.code == 200) {
          // console.log("成功");
          window.location.reload();
          // this.$router.go(0);
        }
      });
    },
    addgood1(id, num) {
      axios({
        token: `${localStorage.getItem("token")}`,
        method: "post",
        url: "http://121.89.205.189:3001/api/cart/updatenum",
        data: `cartid=${id}&num=${--num}`
      }).then(res => {
        if (res.data.code == 200) {
          this.value=num;
          this.$router.go(0);
        }
      });
    },
    addgood2(id, num) {
      // axios.post("/api/cart/updatenum", `cartid=${id}&num=${++num}`,"async:faise");
      // console.log(add);
      axios({
        token: `${localStorage.getItem("token")}`,
        method: "post",
        url: "http://121.89.205.189:3001/api/cart/updatenum",
        data: `cartid=${id}&num=${++num}`
      }).then(res => {
        if (res.data.code == 200) {
          console.log("成功！");
          console.log(num);
          this.value=num;
          this.$router.go(0);
        }
      });
      // e.preventDefault();

      // this.$router.go(0);
    },
    
  }
};
</script>

<style scoped>
.shoppingcar-box {
  display: flex;
  flex-direction: column;
}
.bottom-button {
  width: 160px;
  height: 40px;
}
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
li {
  width: 48%;
  margin-bottom: 0.625rem;
  /* height: 25rem; */
}
li img {
  width: 100%;
  height: 9.8125rem;
}
.like__ {
  flex: 1;
  overflow: auto;
}
.like-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
}
.like-price {
  color: #ee0a24;
  padding: 0;
}
.goods-card {
  margin: 0;
  background-color: white;
}
.van-swipe-cell {
  /* position: relative; */
}
.van-card {
  width: 21.875rem;
  padding-left: 3.125rem;

  /* position: absolute;
  left: 0;
  top: 3.75rem; */
}
.van-checkbox {
  margin-left: 1.25rem;
}
.delete-button {
  height: 100%;
}
.num_ {
  width: 1.875rem;
  height: 1.25rem;
  text-align: center;
  border: 1px solid gray;
}
.sub_,
.add_ {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  color: aliceblue;
  background-color: #ee0a24;
}
</style>